<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 多列瀑布流布局</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            neutral: '#F3F4F6',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .column-gap {
        column-gap: 1.5rem;
      }
      .masonry-grid {
        column-count: 1;
      }
      @screen md {
        .masonry-grid {
          column-count: 2;
        }
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen">
  <main class="container mx-auto px-4 py-8">
    <section class="mb-8">
      <h2 class="text-2xl font-bold mb-4 text-center">CSS 多列瀑布流布局</h2>
      <p class="text-gray-600 max-w-2xl mx-auto text-center mb-8">
        使用 CSS 多列实现的瀑布流布局，内容块会按照顺序从上到下、从左到右排列，自动适应不同高度的内容。
      </p>
    </section>

    <div class="masonry-grid column-gap">
      <!-- 卡片 1 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 break-inside-avoid hover:shadow-lg transition-shadow transform hover:-translate-y-1 duration-300">
        <img src="https://picsum.photos/seed/masonry1/600/400" alt="示例图片" class="w-full h-48 object-cover">
        <div class="p-6">
          <h4 class="text-lg font-bold mb-2">瀑布流卡片一</h4>
          <p class="text-gray-600 mb-4">使用 CSS 多列实现的瀑布流布局，内容块会按照顺序从上到下、从左到右排列。</p>
          <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors">
            查看详情
          </button>
        </div>
      </div>

      <!-- 卡片 2 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 break-inside-avoid hover:shadow-lg transition-shadow transform hover:-translate-y-1 duration-300">
        <img src="https://picsum.photos/seed/masonry2/600/300" alt="示例图片" class="w-full h-40 object-cover">
        <div class="p-6">
          <h4 class="text-lg font-bold mb-2">瀑布流卡片二</h4>
          <p class="text-gray-600 mb-4">短内容卡片，在瀑布流布局中会紧凑排列，创造视觉上的层次感。</p>
          <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg transition-colors">
            了解更多
          </button>
        </div>
      </div>

      <!-- 卡片 3 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 break-inside-avoid hover:shadow-lg transition-shadow transform hover:-translate-y-1 duration-300">
        <img src="https://picsum.photos/seed/masonry3/600/500" alt="示例图片" class="w-full h-64 object-cover">
        <div class="p-6">
          <h4 class="text-lg font-bold mb-2">瀑布流卡片三</h4>
          <p class="text-gray-600 mb-4">中等高度的卡片，展示了瀑布流布局如何优化空间利用。</p>
          <p class="text-gray-600 mb-4">这种布局特别适合图片画廊或博客文章列表。</p>
          <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors">
            阅读更多
          </button>
        </div>
      </div>

      <!-- 卡片 4 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 break-inside-avoid hover:shadow-lg transition-shadow transform hover:-translate-y-1 duration-300">
        <img src="https://picsum.photos/seed/masonry4/600/350" alt="示例图片" class="w-full h-44 object-cover">
        <div class="p-6">
          <h4 class="text-lg font-bold mb-2">瀑布流卡片四</h4>
          <p class="text-gray-600 mb-4">另一个中等高度的卡片，内容布局灵活多样。</p>
          <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg transition-colors">
            探索更多
          </button>
        </div>
      </div>

      <!-- 卡片 5 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 break-inside-avoid hover:shadow-lg transition-shadow transform hover:-translate-y-1 duration-300">
        <img src="https://picsum.photos/seed/masonry5/600/600" alt="示例图片" class="w-full h-80 object-cover">
        <div class="p-6">
          <h4 class="text-lg font-bold mb-2">瀑布流卡片五</h4>
          <p class="text-gray-600 mb-4">长内容卡片，展示了瀑布流布局如何处理不同高度的内容块。</p>
          <p class="text-gray-600 mb-4">这种布局能够最大化利用垂直空间，创造连续的阅读体验。</p>
          <p class="text-gray-600 mb-4">适合展示不同长度的文章、图片或产品信息。</p>
          <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors">
            查看详情
          </button>
        </div>
      </div>
    </div>
  </main>

  <script>
    // 页面加载动画
    document.addEventListener('DOMContentLoaded', () => {
      const fadeInElements = document.querySelectorAll('.masonry-grid > div');
      fadeInElements.forEach((el, index) => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        setTimeout(() => {
          el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
          el.style.opacity = '1';
          el.style.transform = 'translateY(0)';
        }, 100 + index * 100);
      });
    });
  </script>
</body>
</html>  